<template>
    <el-form label-width="4.5%">
        <el-form-item label="客户ID:">
            <div class="detail">&nbsp;{{ customerDetail.id }}</div>
        </el-form-item>
        <el-form-item label="客户详情:">
            <div class="detail">&nbsp;<router-link :to="'/dashboard/clue/' + customerDetail.clueId">查看客户详情
            </router-link>
            </div>
        </el-form-item>
        <el-form-item label="意向产品:">
            <div class="detail">&nbsp;{{ customerDetail.intentionProductDo.name }}</div>
        </el-form-item>
        <el-form-item label="客户描述:">
            <div class="detail">&nbsp;{{ customerDetail.description }}</div>
        </el-form-item>
        <el-form-item label="下次跟踪时间:">
            <div class="detail">&nbsp;{{ customerDetail.nextContactTime }}</div>
        </el-form-item>
        <el-form-item label="跟踪记录:" prop="noteContent">
            <el-input
                v-model="customerRemark.noteContent"
                style="width: 20%;padding-left: 0;"
                :rows="8"
                type="textarea"
                placeholder="请输入线索跟踪记录"/>
        </el-form-item>
        <el-form-item label="跟踪方式:" prop="noteWay">
            <el-select
                v-model="customerRemark.noteWay"
                placeholder="请选择跟踪方式"
                style="width: 20%;;padding-left: 0;"
                clearable
                @click="loadDicValue('noteWay')">
                <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id"/>
            </el-select>
        </el-form-item>
    </el-form>
    <el-form-item>
        <el-button type="primary" @click="customerRemarkSubmit()">提 交</el-button>
        <el-button type="success" @click="createTran">创建交易</el-button>
        <el-button type="primary" plain @click="goBack">返 回</el-button>
    </el-form-item>

    <el-form-item>
        <el-table :data="customerRemarkPageInfo.list" style="width: 100%">
            <el-table-column type="index" label="序号" width="55"/>
            <el-table-column property="noteContent" label="跟踪内容"/>
            <el-table-column property="noteWayDo.typeValue" label="跟踪方式"/>
            <el-table-column property="createTime" label="创建时间"/>
            <el-table-column property="createByDo.name" label="创建人"/>
            <el-table-column property="editTime" label="编辑时间"/>
            <el-table-column property="editByDo.name" label="编辑人"/>
            <el-table-column label="操作" width="110">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)"/>
                    <el-button type="danger" :icon="Delete" circle @click="deleteCustomerRemark(scope.row.id)"/>
                </template>
            </el-table-column>
        </el-table>
    </el-form-item>
    <el-pagination
        background layout="prev, pager, next, jumper, total"
        :total="customerRemarkPageInfo.total"
        :page-size="customerRemarkPageInfo.pageSize"
        @change="toPage"/>

    <!--创建交易的对话框  begin-->
    <el-dialog v-model="tranDialogVisible" title="创建交易" width="800" align-center>
        <el-form ref="createTranFormRef" :model="tran" :rules="tranRules" label-width="110">
            <el-form-item label="交易金额" prop="money">
                <el-input v-model="tran.money" style="padding-left: 0;"/>
            </el-form-item>
            <el-form-item label="预计成交时间" prop="expectedDate">
                <el-date-picker style="width: 100%;" v-model="tran.expectedDate" type="datetime"
                                placeholder="请选择预计成交时间"
                                value-format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
            <el-form-item label="交易阶段" prop="stage">
                <el-select v-model="tran.stage" placeholder="请选择交易阶段" style="width: 100%;padding-left: 0;"
                           clearable
                           @click="loadDicValue('stage')">
                    <el-option v-for="item in stageOptions" :key="item.id" :label="item.typeValue" :value="item.id"
                               :disabled="item.order > 1"/>
                </el-select>
            </el-form-item>
            <el-form-item label="交易描述" prop="description">
                <el-input v-model="tran.description" style="padding-left: 0;" :rows="8" type="textarea"
                          placeholder="请输入交易描述"/>
            </el-form-item>
            <el-form-item label="下次跟踪时间" prop="nextContactTime">
                <el-date-picker style="width: 100%;" v-model="tran.nextContactTime" type="datetime"
                                placeholder="请选择下次跟踪时间" value-format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="tranSubmit()">创 建</el-button>
                <el-button @click="tranDialogVisible = false">关 闭</el-button>
            </div>
        </template>
    </el-dialog>
    <!--创建交易的对话框  end-->
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doDelete, doGet, doPost} from "../http/httpRequest.js";
import {confirmMessage, showMessage} from "../util/message.js";
import {Delete, Edit} from "@element-plus/icons-vue";

// 获取当前路由信息，用于访问路由参数如customerId
let route = useRoute();
// 路由实例，用于页面导航操作
let router = useRouter();
// 客户备注信息的响应式对象，用于存储和更新备注内容
let customerRemark = ref({});
// 客户备注分页信息的响应式对象，用于存储分页数据
let customerRemarkPageInfo = ref({});
// 注入父组件提供的刷新方法，用于局部刷新页面数据
let flush = inject('flush');
// 控制交易对话框显示状态的响应式变量
let tranDialogVisible = ref(false);
// 交易信息的响应式对象，用于存储交易相关数据
let tran = ref({});
// 交易阶段选项的响应式数组，用于下拉框显示
let stageOptions = ref([{}]);
// 联系方式选项的响应式数组，用于下拉框显示
let noteWayOptions = ref([{}]);

// 客户详情信息的响应式对象，包含意向产品、创建人、编辑人等信息
let customerDetail = ref({
    intentionProductDo: {},  // 意向产品信息
    createByDo: {},         // 创建人信息
    editByDo: {}            // 编辑人信息
})

// 组件挂载完成后执行的生命周期钩子
onMounted(() => {
    // 加载客户详细信息
    loadCustomerDetail();
    // 加载客户备注列表，初始加载第1页
    loadCustomerRemarkList(1);
})

/**
 * 加载客户详细信息函数
 * 通过路由参数获取客户ID，调用API获取客户详细信息
 */
const loadCustomerDetail = () => {
    // 从路由参数中获取客户ID
    let id = route.params.customerId;
    // 发送GET请求获取客户详情数据
    doGet('/api/customer/' + id, {}).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取到的客户详情数据赋值给响应式对象
            customerDetail.value = resp.data.info;
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载客户备注列表函数
 * @param {number} current - 当前页码
 * 通过路由参数获取客户ID，调用API获取客户备注分页数据
 */
const loadCustomerRemarkList = current => {
    // 从路由参数中获取客户ID
    let id = route.params.customerId;
    // 发送GET请求获取客户备注分页数据
    doGet('/api/customer/remark/' + id, {
        current: current  // 传递当前页码参数
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取到的分页数据赋值给响应式对象
            customerRemarkPageInfo.value = resp.data.info;
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 创建交易函数
 * 设置交易对话框显示状态为true，打开交易创建对话框
 */
const createTran = () => {
    // 显示交易创建对话框
    tranDialogVisible.value = true
}

/**
 * 加载字典数据函数
 * @param {string} typeCode - 字典类型编码
 * 根据字典类型编码加载对应的字典数据，如联系方式、交易阶段等
 */
const loadDicValue = typeCode => {
    // 发送GET请求获取字典数据
    doGet('api/dic/' + typeCode, {}).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取到的字典数据赋值给对应的选项数组
            // 根据类型编码判断应该赋值给哪个选项数组
            if (typeCode == 'noteWay') {
                // 联系方式字典数据
                noteWayOptions.value = resp.data.info;
            }
            if (typeCode == 'stage') {
                // 交易阶段字典数据
                stageOptions.value = resp.data.info;
            }
        } else {
            // 字典数据加载失败时显示错误提示
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 交易提交函数
 * 收集交易表单数据，调用API创建交易记录
 */
const tranSubmit = () => {
    // 发送POST请求创建交易记录
    doPost('/api/tran', {
        customerId: route.params.customerId,     // 客户ID
        money: tran.value.money,                 // 交易金额
        expectedDate: tran.value.expectedDate,   // 预计成交日期
        stage: tran.value.stage,                 // 交易阶段
        description: tran.value.description,     // 交易描述
        nextContactTime: tran.value.nextContactTime  // 下次联系时间
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 显示成功消息
            showMessage(resp.data.msg, 'success');
            // 页面局部刷新
            flush();
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 客户备注提交函数
 * 收集备注表单数据，调用API创建客户备注
 */
const customerRemarkSubmit = () => {
    // 发送POST请求创建客户备注
    doPost('/api/customer/remark', {
        customerId: route.params.customerId,        // 客户ID
        noteContent: customerRemark.value.noteContent,  // 备注内容
        noteWay: customerRemark.value.noteWay       // 联系方式
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 更新备注信息并刷新页面
            customerRemark.value = resp.data.info;
            flush();
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 跳转到编辑页面的函数
 * @param {number} id - 要编辑的跟踪记录ID
 */
const edit = id => {
    router.push('/dashboard/customer/remark/edit/' + id);
}

/**
 * 删除客户跟踪记录的函数
 * @param {number} id - 要删除的跟踪记录ID
 */
const deleteCustomerRemark = id => {
    // 显示删除确认对话框，'warning'类型会显示黄色警告图标
    confirmMessage('确定删除?', 'warning').then(resp => {
        // 用户确认后调用删除API，拼接活动ID到URL
        doDelete('/api/customer/remark/delete/' + id).then(resp => {
            if (resp.data.code == 200) {
                showMessage('删除成功', 'success'); // 显示绿色成功提示
                flush(); // 调用注入的刷新函数，重新加载活动列表
            } else {
                showMessage(resp.data.msg, 'error'); // 显示红色错误提示，内容为后端返回的错误信息
            }
        }).catch(() => {
            // 捕获API调用异常（如网络错误），此处留空表示不做额外处理
        })
    })
}

/**
 * 分页页码变更处理函数
 * @param {number} current
 * 触发对应页码的列表数据加载
 */
const toPage = current => {
    loadCustomerRemarkList(current);
}

/**
 * 返回上一页函数
 * 通过路由实例的back方法实现页面回退
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>